

<template>
    <tm-app class="groupManage" bgImg="f5">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom: none"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title">搜索食物</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>

        <view
            class="top-search-search d-flex a-center"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="search-input d-flex a-center">
                <view class="input-icon d-flex a-center">
						<image
                            style="width: 30rpx; height: 30rpx"
                            src="/static/nvue/search.png"
                            mode=""
                        />
				</view>
                <input
                    class="inp"
                    type="text"
                    :focus="isFocus"
                    v-model="searchText"
                    placeholder-style="color:#ccc"
                    placeholder="搜索食物和营养"
                />
                <i
                    v-if="searchText"
                    @tap="searchText = ''"
                    class="tmicon tmicon-times-circle-fill"
                    style="color: #c4c4c4"
                ></i>
            </view>
        </view>

        <view
            class="content"
            :style="{ top: `calc(200rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view
                class="nodata2 d-flex d-c a-center j-center wh-center"
                v-if="searched && !foods.length"
            >
                <image class="nodata-img" src="/static/img/nodata.png" alt="" />
                <text class="text">未找到食物~</text>
            </view>

            <!-- <button style="height:80rpx;margin-bottom:10rpx;" @tap="LOGIN">imLogin</button>  -->
            <!-- <button style="height:80rpx;margin-bottom:10rpx;" @tap="pay">Pay</button> -->


            <!-- <button style="height:80rpx;margin-bottom:10rpx;" @tap="GetProvider">getProvider</button>
            <button style="height:80rpx;margin-bottom:10rpx;" @tap="RequestProduct">RequestProduct</button>
            <button style="height:80rpx;margin-bottom:10rpx;" @tap="RequestPayment">RequestPayment</button>
            <button style="height:80rpx;margin-bottom:10rpx;" @tap="CheckResult">CheckResult</button>
            <button style="height:80rpx;margin-bottom:10rpx;" @tap="Restore">Restore</button> -->

            <scroll-view class="scr" :scroll-y="true">
                <view
                    v-for="food in foods"
                    class="food d-flex a-center j-between"
                    @tap="goFoodDetail(food)"
                >
                    <view class="d-flex a-center">
                        <view class="row-fire"></view>
                        <rich-text :nodes="food.nodes"></rich-text>
                    </view>

                    <view class="d-flex a-center">
                        <view class="heat">{{ food.heat }}千卡/100g</view>
                        <image src="/static/Information/right-b.png" class="right-b"/>
                    </view>
                </view>
                <view class="heightBox"></view>
            </scroll-view>
        </view>
    </tm-app>


    <web-view

        :style="{ width: `1rpx`, height: `1rpx` }" 
        :webview-styles="webviewStyles"
        src="/hybrid/html/ali.html"
    ></web-view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from "vue";
import { onReady, onShow, onLoad, onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { imStore } from "@/store/imStore";
import { config as configStore } from "@/store/config";
import { searchFood,webali } from "@/api/api";
import { getProvider,requestProduct,requestPayment,checkResult,restore,checkOldOrder } from '@/utils/iap'
import {wait} from '@/utils/utils'
import { imInit, imLogin, loginOut as imLoginOut } from "@/hooks/imLogin";


const  isFocus = ref(false);





const webviewStyles = ref({
    width:'1',
    height:'1'
})

const LOGIN = ()=>{
    imLogin(userData.id);
}



const pay = async()=>{
    // await wait(500);
    // const res = await webali();
    // const {flag,data} = res;
    // let htmlStr = data.payParam;
    // console.log('htmlStr');
    // console.log(htmlStr);
    // const obj = {
    //     str:htmlStr
    // }

    // let str1 = JSON.stringify(obj);

    var pages = getCurrentPages();
	var page = pages[pages.length - 1];
	var currentWebview = page.$getAppWebview();
    wv = currentWebview.children()[0]
	//wv.setStyle({top:0,height:1,width:1})

    let id1 = 'sdsdi3763ed'
    let id2 = '1234'
    let id3 = 'ccccccccc'
    const token = uni.getStorageSync('api_token');
    console.log('tokentokentoken')
    console.log('tokentokentoken')
    console.log('tokentokentoken')
    console.log(token);

	wv.evalJS(`init("${id1}","${id2}","${id3}","${token}")`);
}



const GetProvider = ()=> {
    getProvider();
}
const RequestProduct = ()=> {
    requestProduct();
}
const RequestPayment = ()=> {
    requestPayment();
}
const CheckResult = ()=> {
    checkResult();
}
const Restore = ()=> {
    console.log('rrrrrrrrrrr')
    console.log('rrrrrrrrrrr')
    console.log('rrrrrrrrrrr')
    restore();
}

const IM_STORE = imStore();
const userData: any = userDataStore();

const systemInfo: any = systemInfoStore();

const goBack = () => {
    uni.navigateBack();
};

const goFoodDetail = (food: any) => {
    const { code } = food;
    if (!code) {
        return;
    }
    uni.navigateTo({
        url: `/pages/dietMenu/foodDetail?code=${code}`,
    });
};

const searched = ref(false);

const searchText = ref("");

const foods = ref([]);

const all_foods = [];
const all_foods1 = ref([]);

const search_childNode = ref([]);

watch(searchText, (newVal: any, oldVal: any) => {
    let str = newVal.trim();
    if (!str) {
        str = "";
        searched.value = false;
        foods.value = [];
        return;
    }


    SearchFood();
});

const SearchFood = async() => {
    //const result_childNode = [];

    const res = await searchFood({name:searchText.value.trim()})

    //result_childNode = res.data;
    if(res.flag!==1){
        uni.showToast({
            icon: "none",
            title: "搜素失败,请重新输入",
            duration: 1500,
        });
        return;
    }




    foods.value = matchTextHighLight(res.data);

    searched.value = true;
};

const matchTextHighLight = (arr) => {
    const reg = new RegExp(searchText.value.trim(), "gi");
    return arr.map((item) => {
        const obj = {
            ...item,
        };
        // const str = `<div style="color:#555;">${item.profile.nick}</div>`;
        const str = item.name;
        const nodes = `<div style="color:#333;font-size:30rpx;font-weight:400;">${str.replace(
            reg,
            (s: any) => {
                return `<span style="color:#23e2a6;font-size:30rpx;font-weight:400;">${s}</span>`;
            }
        )}</div>`;
        obj.nodes = nodes;
        return obj;
    });
};

const getFoods = async () => {
    const res = await getFoodList({ userId: userData.id });
    const { flag, data } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取食物列表失败",
            duration: 1500,
        });
        return;
    }

    data.forEach((c) => {
        if (c.code !== "9999999") {
            c.childNode.forEach((food) => {
                food.nodes = `<div style="color:#333;font-size:30rpx;font-weight:400;">${food.name}</div>`;
                all_foods.push(food);
            });
        }
    });

    all_foods1.value = all_foods;

    //console.log(pageData.value)
    //getDietRecord();
};

onReady(() => {});

onLoad((option: any) => {
    isFocus.value = true;
    //getFoods();
});

onUnload(() => {});

onShow(() => {});
</script>

<style lang="scss" scoped>
.groupManage {
    .content {
        position: absolute;
        width: 750rpx;
        left: 0;
        right: 0;
        padding-top: 20rpx;
        display: flex;
        bottom: 0;

        .nodata2 {
            .nodata-img {
                width: 360rpx;
                height: 360rpx;
            }
            .text {
                font-size: 28rpx;
                color: #999;
            }
        }

        .scr {
            flex: 1;
            .food {
                height: 80rpx;
                padding: 0 30rpx;
                &:active {
                    background: #f5f5f5;
                }
                .row-fire {
                    width: 30rpx;
                    height: 30rpx;
                    background: #1dc691;
                    border-radius: 50%;
                    margin-right: 16rpx;
                }
                .right-b {
                    width: 20rpx;
                    height: 20rpx;
                    margin-left: 50rpx;
                }

                .heat {
                    font-size: 24rpx;
                    color: #999;
                }
                background: #fff;
            }

            .heightBox {
                height: constant(safe-area-inset-bottom);
                height: env(safe-area-inset-bottom);
            }
        }
    }

    .top-search-search {
        position: fixed;
        width: 750rpx;
        height: 100rpx;
        background: #fff;
        padding: 0 30rpx;
        .search-input {
            flex: 1;
            height: 60rpx;
            background: #f5f5f5;
            border-radius: 15rpx;
            padding-right: 20rpx;
            .inp {
                flex: 1;
                font-size: 28rpx;
                color: #333;
                margin-right: 20rpx;
            }
            .input-icon {
                padding-left: 25rpx;
                padding-right: 29rpx;
            }
            .input-input {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #cccccc;
            }
        }
    }
}
.ppp{
    width:750rpx;
}
</style>
